<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Pirates</title>
<link rel="stylesheet" type="text/css"
	href="../../themes/default/panel.css">
<link rel="stylesheet" type="text/css"
	href="../../themes/default/layout.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../src/jquery.panel.js"></script>
<script type="text/javascript" src="../../src/jquery.resizable.js"></script>
<script>
	$(function() {
		var p = $('#p').panel( {
			cls:"layout-move-wests",
			footer : true,
			ftools : [ {
				iconCls : 'panel-tool-close',
				handler : function() {
					alert('f');
				}
			}, {
				iconCls : 'panel-tool-min',
				handler : function() {
					alert('d');
				}
			} ],
			closable : true,
			onClose : function() {
			},
			minimizable : true,
			maximizable : true,
			collapsible : true
		});
		p.getApi().resizable( {
			handles : "e",
			helper : true,
			helperStyle : "layout-move-west"
		});
		$("#loadData").click(function() {
			p.load('iframe', '../index.html');
		});
		$("#open").click(function() {
			p.open();
		});
		$("#close").click(function() {
			p.close();
		});
		$("#toggle").click(function() {
			p.toggle();
		});
	});
</script>
</head>
<body>
<h1>Panel</h1>
<button id="loadData">loadData</button>
<button id="open">open</button>
<button id="close">close</button>
<button id="toggle">toggle</button>
<div style="width: 700px; height: 300px; border: 1px solid red">
<div id="p" title="My Title"
	style="width: 500px; height: 150px; background: #fafafa;">fds</div>
</div>
</body>
</html>